<template>
	<view class="content" :style="{ paddingTop:CustomBar + 'px'}">
		<view class="contain_tab flex-row justify-center items-center"
			:style="{height: CustomBar + 'px', paddingTop: StatusBar + 'px'}">
			<view class="flex justify-center items-center w100 tabbar">
				<image src="@/static/index/fanhui.svg" class="share" @click="goback()"></image>
				<text class="store_name c_f">商家信息</text>
			</view>
		</view>
		<view class="bgred">
			<view class="menu flex flex-row justify-between items-center">
				<view class="menu-top">

					<img class="menu-top-img" v-if="info.logo" :src="info.logo">
					<img v-else class="menu-top-img"
						src="https://tcjyh2022.oss-cn-hangzhou.aliyuncs.com/wechat/csqx_zhong.png">
					<view class="menu-top-mid">
						<view class="menu-top-mid-1">{{info.name}}</view>
						<view class="menu-top-mid-2">
							<img src="/static/index/v.png" class="menu-top-mid-2-img" alt="">
							<text class="menu-top-mid-2-txt">已认证</text>
						</view>
					</view>
					<template v-if="showdy">
						<view class="menu-top-right" v-if="!ifdy" @click="ifsub(1)">
							<img src="/static/plus.svg" class="menu-top-right-img" alt="">
							<view class="menu-top-right-txt">订阅</view>
						</view>
						<view class="menu-top-right f_28 c_f" v-else @click="ifsub(0)">取消订阅</view>
					</template>

				</view>
				<view class="menu-bottom">
					<view class="menu-bottom-item" v-for="(item, index) in menu" :key="index">
						<view class="menu-bottom-item-1">{{item.amount}}</view>
						<view class="menu-bottom-item-2">{{item.text}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="other">
			<view class="other-tab">
				<view v-for="(item, index) in arr" :key="index" class="other-tab-item"
					:class="index==storeIndex ? 'other-tab-active' : ''">{{item}}</view>
			</view>
			<view v-if="storeIndex==0">
				<view class="other-content">
					<view class="other-content-item" @tap="openLocation">
						<view class="other-content-item-left">门店地址</view>
						<view class="other-content-item-right">
							<view class="other-content-item-right-txt">{{info.address}}{{info.area}}</view>
							<img src="/static/location.svg" class="other-content-item-right-img">
						</view>
					</view>
					<view class="other-content-item" @tap="makeCall">
						<view class="other-content-item-left">门店电话</view>
						<view class="other-content-item-right">
							<view class="other-content-item-right-txt">{{info.phone}}</view>
							<img src="/static/phone.svg" class="other-content-item-right-img">
						</view>
					</view>
					<view class="other-content-item">
						<view class="other-content-item-left">营业时间</view>
						<view class="other-content-item-right">
							<view class="other-content-item-right-txt">{{info.openTime}}</view>
						</view>
					</view>
          <view class="other-content-item">
          	<view class="other-content-item-left">长按加微信</view>
          	<view class="other-content-item-right">
          		<image :src="info.image" show-menu-by-longpress="true" class="mt_img"></image>
          	</view>
          </view>
					<!--  650*300的门头照片 -->
          <scroll-view scroll-x="true" class="tabs_scroll">
                  <view class="tabs_l">
                    <view class="tabs_item" v-for="(item, index) in goodList"
                      :key="index" @tap="selectGood(item)">
					  <img :src="item.image" class="tabs_item_img" alt="">
                      <view class="tabs_item_name">{{item.storeName}}</view>
                    </view>
                  </view>
      
                </scroll-view>
				</view>
			</view>
			<view class="other-content" v-if="storeIndex==1"></view>
		</view>
	</view>
</template>

<script>
	import {
		storeInfo,
		subscribelistnew,
		storesubscribe
	} from '@/api/activity.js';
	import { getProductslist } from '@/api/store.js'

	import {
		mapGetters
	} from "vuex";

	export default {
		computed: mapGetters(["isLogin", "chatUrl", "userInfo", "uid"]),
		data() {
			return {
				showdy: true,
				ifdy: false,
				id: '',
				CustomBar: this.CustomBar,
				StatusBar: this.StatusBar,
				info: {},
				poram: {
					page: 1,
					limit: 100,
					type: 1
				},

				storeIndex: 0,
				arr: ['详细信息'], // 商品按照价格排序
				menu: [{
					text: '发起抽奖次数',
					amount: 0,
					url: ''
				}, {
					text: '参与抽奖人数',
					amount: 0,
					url: ''
				}, {
					text: '订阅人数',
					amount: 0,
					url: ''
				}],
				goodList: []
			}
		},
		onShow: function() {

		},
		onLoad(data) {
			this.id = data.id
			if (this.userInfo.relateId == this.id) {
				this.showdy = false
			}else{
				this.showdy = true
			}
			this.getinfo()
			this.getProduct()

		},

		methods: {
			selectGood(item) {
				if (item.image) {

					uni.previewImage({
						content: item.storeName,
								urls: [item.image]
							})
				}
			},
			getProduct() {
				getProductslist({
					page: 1,
					limit: 20,
					shopId: this.id
				}).then(res => {
					this.goodList = res.data.list
				})
			},
			openLocation() {
				uni.openLocation({
					longitude: parseFloat(this.info.longitude),
					latitude: parseFloat(this.info.latitude),
					name: this.info.name,
					success: function () {
						console.log('success');
					},
					fail: (err) => {
						console.log(err)
					}
				});
			},
			makeCall() {
				if(this.info.phone) {
					uni.makePhoneCall({
						phoneNumber: this.info.phone
					})
				}
			},
			goback() {
				uni.navigateBack({
					delta: 0
				})
			},
			getinfo() {

				storeInfo({
					relateId: this.id
				}).then(res => {
					this.info = res.data.merchant
					console.log(this.info)
					this.ifsub_new()
					this.menu[0].amount = this.info.createDrawCount
					this.menu[1].amount = this.info.drawUserCount
					this.menu[2].amount = this.info.subscribeCount
				})
			},
			//订阅
			ifsub(e) {
				storesubscribe({
					status: e,
					merchantId: this.info.id
				}).then(res => {
					uni.showToast({
						title: res.message
					})
					this.ifsub_new()
				})
			},
			someid(e) {
				e.some((el) => {
					console.log(this.info)
					return el.merchantId === this.info.id;
				});
			},


			//检查是否订阅
			ifsub_new() {
				subscribelistnew(this.poram).then(res => {
					var hasId = res.data.list.find((el) => {
						return el.merchantId === this.info.id;
					});
					if (hasId !== undefined) {
						this.ifdy = true
					} else {
						this.ifdy = false
					}


				})


			}



		}
	}
</script>

<style lang="scss">
  .tabs_scroll {
    flex: 1;
    height: 400rpx;
    line-height: 96rpx;
    flex-wrap: nowrap;
    overflow: hidden;
    white-space: nowrap;



    .tabs_l {
      display: flex;
      align-items: center;


      .tabs_item {
		display: flex;
		flex-direction: column;
		margin-right: 20rpx;
		&_name {
			font-size: 24rpx;
			width: 300rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			letter-spacing: 0rpx;
			height: 100rpx;
		}
		&_img {
			width: 300rpx;
			height: 300rpx;
		}
      }

      .tabs_item2 {
        position: relative;
        font-size: 30rpx;
        color: #FF774D;
		
      }
    }
  }
	.mt_img {
		width: 300rpx;
		height: 300rpx;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.contain_tab {
		position: fixed;
		z-index: 99;
		background-color: #DF4B43;
		width: 100%;
		left: 0;
		top: 0;

		.tabbar {
			width: 100%;
			position: relative;

			.share {
				position: absolute;
				width: 40rpx;
				height: 40rpx;
				left: 40rpx;
			}
		}

	}

	.bgred {
		padding: 30rpx 0;
		padding-bottom: 0;
	}

	.w50 {
		width: 50%;
		color: #fff;
	}

	.other {
		width: 710rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin-top: 24rpx;
		border: 1px solid #eee;

		&-content {
			padding: 30rpx;

			&-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 30rpx;

				&-left {
					font-family: PingFang SC;
					font-size: 28rpx;
					font-style: normal;
					font-weight: 400;
					color: #525252;
					width: 150rpx
				}

				;

				&-right {
					display: flex;
					align-items: center;
					flex: 1;
          justify-content: flex-end;

					&-img {
						width: 34rpx;
						height: 34rpx;
					}

					&-txt {
						flex: 1;
						text-align: right;
						font-family: PingFang SC;
						font-size: 28rpx;
						font-style: normal;
						font-weight: 400;
						color: #525252
					}
				}
			}
		}

		&-tab {
			width: 690rpx;
			padding: 24rpx 30rpx;
			height: 80rpx;
			display: flex;
			align-items: center;

			&-item {
				font-family: PingFang SC;
				font-size: 24rpx;
				font-style: normal;
				font-weight: 400;
				color: #525252;
				margin-right: 10rpx;
			}

			&-active {
				color: #DF4B43 !important;
				font-weight: 500 !important;
				font-size: 28rpx !important;
			}
		}
	}

	.menu {
		width: 710rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin-left: 20rpx;
		flex-direction: column;

		&-bottom {
			height: 130rpx;
			width: 100%;
			display: flex;

			&-item {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;

				&-1 {
					font-family: PingFang SC;
					font-size: 38rpx;
					font-style: normal;
					font-weight: 500;
					color: #000
				}

				&-2 {
					font-family: PingFang SC;
					font-size: 24rpx;
					font-style: normal;
					font-weight: 400;
					color: rgba(0, 0, 0, .9)
				}
			}
		}

		&-top {
			display: flex;
			align-items: center;
			height: 184rpx;
			padding: 32rpx;
			border-bottom: 1px solid #efefef;
			width: 100%;

			&-img {
				width: 120rpx;
				height: 120rpx;
				border-radius: 20rpx;
			}

			&-mid {
				display: flex;
				flex-direction: column;
				margin-left: 24rpx;
				flex: 1;

				&-1 {
					color: rgba(0, 0, 0, 0.80);
					font-family: PingFang SC;
					font-size: 38rpx;
					font-style: normal;
					font-weight: 500;
				}

				&-2 {
					display: flex;
					align-items: center;

					&-img {
						width: 30rpx;
						height: 30rpx;
					}

					&-txt {
						color: #DF4B43;
						font-family: PingFang SC;
						font-size: 24rpx;
						font-style: normal;
						font-weight: 400;
					}
				}
			}

			&-right {
				border-radius: 50px;
				background: #DF4B43;
				width: auto;
				padding: 0 20rpx;
				height: 68rpx;
				padding: 0 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				&-img {
					width: 30rpx;
					height: 30rpx;
					margin-right: 10rpx;
				}

				&-txt {
					font-family: PingFang SC;
					font-size: 26rpx;
					font-style: normal;
					font-weight: 500;
					color: #fff;
				}
			}
		}
	}
</style>